<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 2px solid #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="" width="500" height="800"></canvas>
		<script type="text/javascript">
			var c = document.querySelector("canvas")
			var cs = c.getContext("2d")
			cs.strokeStyle = "red"
			cs.fillStyle = "red"
			
			// cs.beginPath()相当于movTo,作用是把圆与上一个点分开
			// cs.closePath()将圆的首尾连接
			cs.arc(250,100,50,0,2*Math.PI,false)
			
			//矩形绘制   rect
			// cs.strokeRect(230,75,10,10)
			//眼睛
			cs.fillRect(230,75,10,10)
			cs.fillRect(260,75,10,10)
			cs.stroke()
			//鼻子
			cs.beginPath()
			cs.fillStyle = "red"
			cs.moveTo(250,100)
			cs.lineTo(240,105)
			cs.lineTo(260,105)
			cs.stroke()
			cs.fill()
			//嘴巴
			cs.beginPath()
			cs.fillStyle = "yellow"
			cs.moveTo(240,120)
			cs.lineTo(260,120)
			cs.arc(250,120,10,0,Math.PI)
			cs.fillRect(245,120,5,5)
			cs.fillRect(248,120,5,5)
			cs.stroke()
			//脖子
			cs.beginPath()
			cs.moveTo(240,150)
			cs.lineTo(240,160)
			cs.moveTo(260,150)
			cs.lineTo(260,160)
			cs.stroke()
			// cs.stroke()
			// cs.fill()
			
			
			//题诗
			cs.fillStyle = "red"
			cs.font = "30px 宋体"
			cs.fillText("龙",20,50)
			cs.fillText("龙",20,80)
			cs.strokeText("小",20,110)
			
			//图像
			var img = new Image()
			img.src = "img/4.jpg"
			window.onload = function(){
				cs.drawImage(img,170,30,150,45)
			}
		</script>
	</body>
</html>
